<template>
<div class="main">
  <div class="app-page-header">
      <div class="logo">
        <a href="">
          <div class="left">
            <img
              src="~@/assets/img/imgl2.png"
              alt=""
            >
          </div>
          <div class="right">
            <div class="tit">青少年运动健康</div>
            <div class="tit">管理平台</div>
          </div>
        </a>
      </div>
      <div class="login-basic-info">
        <span class="u-img-box">
          <img src="../../../assets/img/imgl7.png" alt="">
        </span>
        <span class="u-info">
          <i class="name">{{this.userName}}</i>
          <i class="school-name">{{this.userDeptName}}</i>
        </span>
        <div class="op-more">
            
          <div class="op-more-box">
            <ul class="op-mus">
              <li class="edit-pwd" @click="updatePasswordHandle">修改密码</li>
              <li class="login-out" @click="logoutHandle">退出登录</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="m-left">
      <!-- <div class="logo">
        <a href="">
          <div class="left">
            <img src="~@/assets/img/imgl2.png" alt="" />
          </div>
          <div class="right">
            <div class="tit">青少年健康管理</div>
          </div>
        </a>
      </div> -->
      <div class="nav">
        <ul>
          <li>
            <a href="/#/indexSchool" class="v1"><i class="i2"></i>首页</a>
          </li>
          <li>
            <a href="/#/indexSchoolTest" class="v1" ><i class="i2"></i>体质健康测试</a></li>
        </ul>
      </div>
      <!-- <div class="m-information">
        <a @click="logoutHandle" class="close"></a>
        <a @click="updatePasswordHandle" class="more"></a>
        <div class="information">
          <div class="box">
            <div class="pic">
              <img src="~@/assets/img/imgl7.png" alt="" />
            </div>
          </div>
          <div class="txt">
            <h3 class="tit">{{this.userName}}</h3>
            <div class="info">{{this.userDeptName}}</div>
          </div>
        </div>
      </div> -->
    </div>
    <div class="m-contant">
      <div class="left">
  <div class="heal-guidance-program">
    <div class="other-panel">
      <div class="today-targets current-period">
        <div class="row">
          <div class="item main-item">
            <div class="act-img-box">
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/actrun.png"
                alt=""
              />
            </div>
            <div class="act-con">
              <span class="status">执行中人数</span>
              <span class="distince">168/200</span>
            </div>
          </div>
          <div class="item main-item">
            <div class="act-img-box">
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/actrun.png"
                alt=""
              />
            </div>
            <div class="act-con">
              <span class="status">当日打卡人数</span>
              <span class="distince">168/200</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="other-panel">
      <div class="tit">本周情况</div>
      <div class="dob-chart-box">
        <div class="left">
          <!-- 运动频次完成率 -->
          <div class="tit">
            运动频次完成率
          </div>
          <div
            id="actFrequencyCompleteRate"
            style="width: 100%; height: 100%"
          ></div>
        </div>
        <div class="right">
          <!-- 运动时长完成率 -->
          <div class="tit">
            运动时长完成率
          </div>
          <div
            id="actDurationCompleteRateChart"
            style="width: 100%; height: 100%"
          ></div>
        </div>
      </div>
    </div>
    <div class="single-chart-box">
      <div id="actFrequencyChart" style="width: 100%; height: 405px"></div>
    </div>
    <div class="bot-chart-box">
      <div class="left">
        <div id="actProportionChart" style="width: 100%; height: 405px"></div>
      </div>
      <div class="right">
        <div class="tit">
          <div class="tit-text">运动强度报名</div>
          <div class="sort-box">
            <a class="active">正序</a>
            <a>倒序</a>
          </div>
        </div>
        <div class="rank-list">
          <div class="item">
            <span class="rank-num">1<i class="unit">st</i></span>
            <span class="class-name">三（5）班</span>
            <span class="time">完成率：100%</span>
          </div>
          <div class="item">
            <span class="rank-num">2<i class="unit">st</i></span>
            <span class="class-name">三（8）班</span>
            <span class="time">完成率：98%</span>
          </div>
          <div class="item" >
            <span class="rank-num">3<i class="unit">st</i></span>
            <span class="class-name">四（2）班</span>
            <span class="time">完成率：98%</span>
          </div>
          <div class="item" >
            <span class="rank-num">4<i class="unit">st</i></span>
            <span class="class-name">五（1）班</span>
            <span class="time">完成率：98%</span>
          </div>
          <div class="item" >
            <span class="rank-num">5<i class="unit">st</i></span>
            <span class="class-name">三（2）班</span>
            <span class="time">完成率：98%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
   </div>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-show="updatePassowrdVisible" ref="updatePassowrd"></update-password>
  </div>
</template>

<script>
import UpdatePassword from '@/views/main-navbar-update-password'
import * as echarts from '_echarts@5.2.2@echarts'

import { clearLoginInfo, initQueryParams } from '@/utils'
export default {
  data() {
    return {
      actFrequencyChart: null,
      actProportionChart: null,
      actFrequencyCompleteRate: null,
      actDurationCompleteRateChart: null,
      queryParams: initQueryParams(),
      pageData: {
        totalCount: 0,
        list: [],
        extData: {}
      },
      dataListLoading: false,
      btnLoading: false,
      pageLoading: false,
      updatePassowrdVisible: false,
      createTimePickerOptions: {
        shortcuts: dateSelectShorts()
      }
    };
  },
  components: {
    UpdatePassword
  },
  mounted() {
    let that = this;
    this.getUserInfo()

    window.addEventListener('scroll', this.onScroll)
    this.$nextTick(() => {
      that.initActFrequencyChart();
      that.initActProportionChart();
      that.initActFrequencyCompleteRateChart();
      that.initActDurationCompleteRateChart();
    });
  },
  computed: {
    documentClientHeight: {
      get () { return this.$store.state.common.documentClientHeight },
      set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
    },
    documentClientWidth: {
      get () { return this.$store.state.common.documentClientWidth },
      set (val) { this.$store.commit('common/updateDocumentClientWidth', val) }
    },
    userId: {
      get() { return this.$store.state.user.id },
      set(val) { this.$store.commit('user/updateId', val) }
    },
    userName: {
      get() { return this.$store.state.user.name },
      set(val) { this.$store.commit('user/updateName', val) }
    },
    userTel: {
      get() { return this.$store.state.user.tel },
      set(val) { this.$store.commit('user/updateTel', val) }
    },
    userMobile: {
      get() { return this.$store.state.user.mobile },
      set(val) { this.$store.commit('user/updateMobile', val) }
    },
    userDeptId: {
      get() { return this.$store.state.user.deptId },
      set(val) { this.$store.commit('user/updateDeptId', val) }
    },
    userDeptName: {
      get() { return this.$store.state.user.deptName },
      set(val) { this.$store.commit('user/updateDeptName', val) }
    },
    userType: {
      get() { return this.$store.state.user.userType },
      set(val) { this.$store.commit('user/updateUserType', val) }
    }
  },
  destroyed() {
  },
  activated() {

  },
 
  methods: {

     // 获取当前用户
    getUserInfo() {
      this.$http({
        url: this.$http.requestUrl('/sys/user/info'),
        method: 'get',
        params: this.$http.requestParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.userId = data.user.userId
          this.userName = data.user.userName
          this.userTel = data.user.tel
          this.userMobile = data.user.mobile
          this.userDeptId = data.user.deptId
          this.userDeptName = data.user.deptName
          this.userType = data.user.userType
          
        }
      })
    },
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true
      this.$refs.updatePassowrd.init()
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.requestUrl('/sys/logout'),
          method: 'post',
          data: this.$http.requestData()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            clearLoginInfo()
            this.$router.push({ name: 'login' })
          }
        })
      }).catch(() => { })
    },
    initActDurationCompleteRateChart() {
      let _actDurationCompleteRateChart = echarts.init(
        document.getElementById("actDurationCompleteRateChart")
      );
      let data={
        '运动强度':120,
        '运动频率':150,
        '运动时长':90
      }
      let option = {
        title: {
          text: "时长完成率",
          x:'24%',
          y:'68%',
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize:18
          },
        },
        legend:{
          show:true,
          icon: "circle",
          right: "15%",
          top: "32%",
          orient: "vertical",
          formatter: function(params,b) {
            return params+'\n\n'+(((data[params]/180).toFixed(2)*100))+'%'
          },
          data:[{name:'运动强度'},{name:'运动频率'},{name:'运动时长'}]
        },
        series: [
          // 主图
          {
            type: "gauge",
            startAngle: 180,
            name:'运动强度',
            endAngle: 0,
            center: ["31%", "73%"],
            radius: "100%",
            min: 0,
            max: 180,
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#4DBDAE"
              }
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#A3E0D6"]],
                width: 18
              }
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 120
              }
            ]
          },
          {
            type: "gauge",
            name:'运动频率',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 180,
            center: ["31%", "73%"],
            radius: "80%",
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#659EED",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#AFD2F3"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 150
              },
            ],
          },
          {
            type: "gauge",
            name:'运动时长',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 180,
            center: ["31%", "73%"],
            radius: "60%",
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#F3AF5C",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#EFD9B0"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 90
              },
            ]
          }
        ]
      };

      _actDurationCompleteRateChart.setOption(option);

      window.addEventListener("resize", () => {
        _actDurationCompleteRateChart.resize();
      });
    },
    initActFrequencyCompleteRateChart() {
      let _actFrequencyCompleteRate = echarts.init(
        document.getElementById("actFrequencyCompleteRate")
      );
      let data={
        '运动强度':120,
        '运动频率':150,
        '运动时长':90
      }
      let option = {
        title: {
          text: "频次完成率",
          x:'24%',
          y:'68%',
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize:18
          },
        },
        legend:{
          show:true,
          icon: "circle",
          right: "15%",
          top: "32%",
          orient: "vertical",
          formatter: function(params,b) {
            return params+'\n\n'+(((data[params]/180).toFixed(2)*100))+'%'
          },
          data:[{name:'运动强度'},{name:'运动频率'},{name:'运动时长'}]
        },
        series: [
          // 主图
          {
            type: "gauge",
            startAngle: 180,
            name:'运动强度',
            endAngle: 0,
            center: ["31%", "73%"],
            radius: "100%",
            min: 0,
            max: 180,
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#4DBDAE"
              }
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#A3E0D6"]],
                width: 18
              }
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 120
              }
            ]
          },
          {
            type: "gauge",
            name:'运动频率',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 180,
            center: ["31%", "73%"],
            radius: "80%",
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#659EED",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#AFD2F3"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 150
              },
            ],
          },
          {
            type: "gauge",
            name:'运动时长',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 180,
            center: ["31%", "73%"],
            radius: "60%",
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#F3AF5C",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#EFD9B0"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 90
              },
            ]
          }
        ]
      };

      _actFrequencyCompleteRate.setOption(option);

      window.addEventListener("resize", () => {
        _actFrequencyCompleteRate.resize();
      });
    },
    initActProportionChart() {
      this.actProportionChart = echarts.init(
        document.getElementById("actProportionChart")
      );
      let option = {
        title: {
          text: "运动项目占比",
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize: 24,
          },
        },
        color: ["#27d391", "#eddb76", "#fe3838", "#27d391"],
        legend: {
          top: 10,
          left: "center",
          textStyle: {
            color: "#97b8d8",
          },
          data: ["优", "良", "差", "无"],
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: [
          {
            gridIndex: 0,
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(151,184,216,0.5)",
                type: "solid",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(0, 0, 0, 0.25)",
                fontSize: 18,
              },
            },
            type: "category",
            boundaryGap: false,
            data: ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级"],
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "rgba(0, 0, 0, 0.25)",
                fontSize: 18,
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            splitNumber: 5,
            nameLocation: "center",
            nameTextStyle: {
              color: "#97b8d8",
              fontSize: 14,
            },
            nameRotate: 360,
          },
        ],
        grid: {
          left:0,
          right:0,
          bottom:0,
          containLabel: true
        },
        series: [
          {
            type: "line",
            data: [10, 20, 7, 3, 8, 11],
            xAxisIndex: 0,
            yAxisIndex: 0,
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0.05, 0.01, 1, 0.8, [
                {
                  offset: 0,
                  color: "#FFFFFF",
                },
                {
                  offset: 0.3,
                  color: "#4490E8",
                },
                {
                  offset: 0.6,
                  color: "#4595E2",
                },
                {
                  offset: 0.9,
                  color: "#4DBDAE",
                },
                {
                  offset: 1,
                  color: "#FFFFFF",
                },
              ]),
              width: 5,
            },
            itemStyle: {
              normal: {
                color: "#92c690",
                borderColor: "#92c690",
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0.05, 0.01, 1, 0.8, [
                {
                  offset: 0,
                  color: "#4DBDAE",
                },
                {
                  offset: 0.5,
                  color: "#9AA5DC",
                },
                {
                  offset: 1,
                  color: "#EDFDF9",
                },
              ]),
            },
          },
        ],
      };
      this.actProportionChart.setOption(option);
    },
    initActFrequencyChart() {
      this.actFrequencyChart = echarts.init(
        document.getElementById("actFrequencyChart")
      );
      let option = {
        title: {
          text: "各项年级男女运动频次",
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize: 24,
          },
        },
        color: ["#27d391", "#eddb76", "#fe3838", "#27d391"],
        legend: {
          top: 10,
          left: "center",
          textStyle: {
            color: "#97b8d8",
          },
          data: ["优", "良", "差", "无"],
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: [
          {
            gridIndex: 0,
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "rgba(0, 0, 0, 0.25)",
                fontSize: 18,
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(151,184,216,0.5)",
                type: "solid",
              },
            },
            type: "category",
            boundaryGap: false,
            data: [
              "01",
              "02",
              "03",
              "04",
              "05",
              "06",
              "07",
              "08",
              "09",
              "10",
              "11",
              "12",
              "13",
              "14",
            ],
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "rgba(0, 0, 0, 0.25)",
                fontSize: 18,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            splitNumber: 5,
            nameLocation: "center",
            nameTextStyle: {
              color: "#97b8d8",
              fontSize: 14,
            },
            nameRotate: 360,
          },
        ],
        grid: {
          left:0,
          right:0,
          bottom:0,
          containLabel: true
        },
        series: [
          {
            type: "line",
            data: [2, 4, 6, 1, 10, 15, 2, 20, 8, 7, 15, 10, 3, 18, 12],
            xAxisIndex: 0,
            yAxisIndex: 0,
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0.05, 0.01, 1, 0.8, [
                {
                  offset: 0,
                  color: "#FFFFFF",
                },
                {
                  offset: 0.3,
                  color: "#4490E8",
                },
                {
                  offset: 0.6,
                  color: "#4595E2",
                },
                {
                  offset: 0.9,
                  color: "#4DBDAE",
                },
                {
                  offset: 1,
                  color: "#FFFFFF",
                },
              ]),
              width: 5,
            },
            itemStyle: {
              normal: {
                color: "#92c690",
                borderColor: "#92c690",
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0.05, 0.01, 1, 0.8, [
                {
                  offset: 0,
                  color: "#4DBDAE",
                },
                {
                  offset: 0.5,
                  color: "#9AA5DC",
                },
                {
                  offset: 1,
                  color: "#EDFDF9",
                },
              ]),
            },
          },
        ],
      };
      this.actFrequencyChart.setOption(option);
    }
  },
};
</script>
<style src="@/assets/scss/stu.scss" lang="scss" scoped>

</style>
<style scoped lang="scss">
.heal-guidance-program {
  padding: 20px;
  background: #dbf3ed;
  height: 100%;
  
  >div{
    width:1513px;
  }
  .my-program {
    .cons-item {
      margin-bottom: 36px;
      display: flex;
      background: #edfdf9;
      border-radius: 25px;
      box-sizing: border-box;
      height: 402px;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
      width: max-content;
      .main-item {
        min-width: 323px;
        width: 323px;
        min-height: 414px;
        background: #edfdf9;
        border-radius: 25px 25px 0px 0px;
        border-bottom-left-radius: 25px;
        box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
        position: relative;
        overflow: hidden;
        margin-right: 50px;
        top: -12px;
        .m-header {
          background: linear-gradient(49deg, #4dbdae 0%, #4dbdae 100%);
          line-height: 70px;
          text-align: center;
          font-size: 24px;
          color: #ffffff;
        }
        .con {
          padding: 20px;
          box-sizing: border-box;
          .name {
            font-size: 18px;
            color: #2f5a54;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name-str {
              font-size: 20px;
              color: #2f5a54;
              font-weight: 600;
            }
          }
        }
        .remark {
          .rmk-tit {
            color: #2f5a54;
            font-size: 18px;
            font-weight: 500;
            margin: 22px 0px;
          }
          .desc {
            background: #dbf3ed;
            font-size: 16px;
            color: #2f5a54;
            line-height: 26px;
            padding: 10px;
            border-radius: 10px;
            box-sizing: border-box;
          }
        }
        .btns {
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .choose-btn {
            border-color: #4dbdae;
            background: #4dbdae;
            box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
            color: #fff;
            border-radius: 10px;
          }
        }
      }
      .item-response {
        max-width: 916px;
        overflow-y: hidden;
        .sub-items {
          display: inline-flex;
        }
      }
      .sub-items {
        display: flex;
        padding: 27px;
        padding-left: 0px;
        .sub-item {
          margin-right: 20px;
          min-width: 283px;
          .s-header {
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 56px;
            background: #659eed;
            border-radius: 10px;
            padding: 0px 25px;
            font-size: 16px;
            margin-bottom: 12px;
          }
          .childrens {
            display: flex;
            align-items: center;
            .child-item {
              min-width: 283px;
              margin-right: 20px;
            }
            .child-item:last-child {
              margin-right: 0px;
            }
          }
          .second-bg {
            background: #f3af5c;
          }
          .third-bg {
            background: #fb8885;
          }
          .con {
            background: #dbf3ed;
            border-radius: 10px;
            overflow: hidden;
            .icon-row {
              background-color: #bee5db;
              line-height: 102px;
              height: 102px;
              background-image: url("../../../assets/img/motion_icon.png");
              background-repeat: no-repeat;
              background-size: 56px 56px;
              background-position: 10%;
              display: flex;
              align-items: center;
              .str-box {
                margin-left: 100px;
              }
              .name {
                font-size: 18px;
                color: #2f5a54;
                display: block;
                line-height: 30px;
              }
              .name-str {
                font-size: 24px;
                color: #2f5a54;
                font-weight: 500;
                line-height: 30px;
                display: block;
              }
            }
            .desc-items {
              font-size: 16px;
              color: #2f5a54;
              padding: 0px 24px 24px 24px;
              .field {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20px;
                line-height: 18px;
                .label {
                }
                .val {
                  font-size: 18px;
                  color: #2f5a54;
                  font-weight: 500;
                }
              }
            }
          }
        }
        .sub-item:last-child {
          margin-right: 0px;
        }
      }
    }
  }
  .other-panel {
    .tit {
      font-size: 24px;
      color: #2f5a54;
      font-weight: 500;
      margin-bottom: 30px;
    }
    .today-targets {
      .row {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .main-item {
          width: 350px;
          height: 116px;
          background: #edfdf9;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          border-radius: 20px;
          padding: 23px 29px;
          display: flex;
          align-items: center;
          .act-con {
            margin-left: 27px;
            span {
              display: block;
              font-size: 18px;
              color: #2f5a54;
            }
            .name {
              font-size: 24px;
              font-weight: 500;
              color: #2f5a54;
            }
          }
        }
        .item {
          width: 350px;
          height: 116px;
          border-radius: 20px;
          margin-left: 36px;
          color: #fff;
          .top-desc {
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;
            margin-left: 80px;
            margin-right: 10px;
          }
          .progress-bar {
            position: relative;
            height: 10px;
            border-radius: 6px;
            width: calc(100% - 150px);
            margin-left: 80px;
            margin-right: 10px;
            margin-top: 15px;
            .bar {
              position: absolute;
              left: 0px;
              top: 0px;
              height: 100%;
              border-radius: 6px;
              background: #fff;
              transition: 0.2s all linear;
            }
            .val {
              position: absolute;
              right: -50px;
              top: -3px;
            }
          }
          .progress-bar1 {
            background: #6e4109;
          }
          .progress-bar2 {
            background: #5d8fd5;
          }
          .progress-bar3 {
            background: #16413c;
          }
        }
        .item:first-child {
          margin-left: 0px;
        }
        .sub-item1 {
          background-color: #f3af5c;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/acttimeline.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
        .sub-item2 {
          background-color: #659eed;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/actnum.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
        .sub-item3 {
          background-color: #4dbdae;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/actqd.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
      }
    }
    .current-period {
      .row {
        .main-item {
          width: 740px;
          .act-con {
            display: flex;
            width: 100%;
            justify-content: space-between;
            .status,
            .distince {
              font-size: 24px;
              font-weight: 500;
              color: #2f5a54;
            }
          }
        }
      }
    }
  }
  .dob-chart-box {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    > div {
      width: 740px;
      height: 414px;
      background: #edfdf9;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
        -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
      border-radius: 25px;
      padding: 36px 30px;
    }
    .right {
      margin-left: 30px;
      .chart-tabs {
        color: #2f5a54;
        font-size: 24px;
        font-weight: 500;
        span {
          cursor: pointer;
          margin-right: 31px;
          position: relative;
        }
        .active {
          color: #4dbdae;
          &:after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 0px;
            width: 100%;
            height: 4px;
            background: #4dbdae;
            border-radius: 1px;
          }
        }
      }
    }
  }
  .sign-in-records {
    width: 1512px;
    background: #edfdf9;
    box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
      -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    padding: 0px 29px;
    padding-bottom: 30px;
    .tit {
      font-size: 24px;
      font-weight: 500;
      color: #2f5a54;
      margin-top: 48px;
      display: inline-block;
    }
    .types {
      margin-top: 26px;
      display: flex;
      span {
        font-size: 14px;
        color: #2f5a54;
        position: relative;
        margin-right: 44px;
        padding-left: 35px;
        cursor: pointer;
      }

      .no-sign:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #dddddd;
      }
      .no-cpltoday-target:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #f3af5c;
      }
      .cpltoday-target:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #4cbd8e;
      }
      .exceed:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #4493e5;
      }
    }
    .sign-calendars {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 30px;
    }
    .calendar-item {
      margin-right: 30px;
      .tit {
        margin-left: 10px;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0px;
      }
      table tr th {
        font-size: 12px;
        color: #a8b4b1;
        width: 54px;
        text-align: center;
      }
      table tr {
        line-height: 50px;
        td {
          padding: 0px 10px;
          text-align: center;
          width: 54px;
        }
      }
      table tr td a {
        color: #000000;
        font-size: 16px;
        position: relative;
        display: inline-block;
        text-align: center;
        width: 100%;
      }
      .other-day {
        color: #a8b4b1;
      }
      .cpl-clr:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 100%;
        bottom: -5px;
        border-radius: 6px;
        left: 0px;
        background: #4cbd8e;
      }
      .no-sign-clr:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 100%;
        bottom: -5px;
        border-radius: 6px;
        left: 0px;
        background: #dddddd;
      }
      .no-cpl-clr:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 100%;
        bottom: -5px;
        border-radius: 6px;
        left: 0px;
        background: #f3af5c;
      }
      .exceed-clr:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 100%;
        bottom: -5px;
        border-radius: 6px;
        left: 0px;
        background: #4493e5;
      }
    }
  }
  .single-chart-box {
    padding: 31px 29px;
    width: 1512px;
    min-height: 405px;
    background: #edfdf9;
    box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
      -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
    border-radius: 25px;
  }
  .bot-chart-box {
    margin-top: 30px;
    display: flex;
    > div {
      width: 740px;
      background: #edfdf9;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
        -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
      border-radius: 25px;
    }
    > div:first-child {
      padding: 31px 30px;
    }
    > div:last-child {
      margin-left: 30px;
    }
    .right {
      padding: 36px 30px;
      .tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 54px;
        .tit-text {
          font-size: 24px;
          color: #2f5a54;
          font-weight: 500;
        }
        .sort-box {
          a {
            line-height: 36px;
            width: 80px;
            text-align: center;
            border-radius: 8px;
            display: inline-block;
            cursor: pointer;
            background: #edfdf9;
            font-size: 16px;
            color: #2f5a54;
            box-shadow: -2px -2px 8px 0px rgba(241, 252, 249, 1),
              2px 2px 8px 0px rgba(201, 231, 225, 1) inset;
          }
          a:first-child {
            margin-right: 10px;
          }
          .active {
            background: #4dbdae;
            color: #fff;
            box-shadow: none;
          }
        }
      }
      .rank-list {
        .item {
          color: #2f5a54;
          line-height: 55px;
          .rank-num {
            font-weight: 500;
            font-size: 24px;
            margin-right: 30px;
            .unit {
              font-style: normal;
              font-size: 16px;
              font-weight: normal;
            }
          }
          .class-name {
            font-size: 16px;
          }
          .time {
            float: right;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>